<template>
  <div class="home">
    <div class="d-logo-wrapper" style="cursor: pointer">
      <div class="headerlist" @click="$router.go('-1')">
        <i class="el-icon-back" style="font-size: 20px; margin-left: 10px"></i>
        <span class="headerTitle">我的应用</span>
        <span class="headerTitle">/</span>
        <span class="headerTitle">模块管理</span>
        <span class="headerTitle">/</span>
        <span class="headerTitle">字典管理</span>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%;margin:20px 0px">
      <el-table-column prop="tableId" label="ID" align="center"></el-table-column>
      <el-table-column prop="tableName" label="表名称" align="center"></el-table-column>
      <el-table-column prop="tableId" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="joinViceTable(scope.row)" type="text">关联副表</el-button>
          <el-button @click="showViceTable(scope.row)" type="text">展示字段</el-button>
          <el-button @click="sortViceTable(scope.row)" type="text">字段排序</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="关联副表" :visible.sync="dialogVisible" width="600px">
      <el-table :data="joinTableData" style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="mainFieldName" label="主表名称" align="center"></el-table-column>
        <el-table-column prop="foreignTableName" label="关联表名称" align="center"></el-table-column>
        <el-table-column prop="foreignFieldName" label="关联表名称" align="center"></el-table-column>
      </el-table>
      <el-button @click="submitJion" type="primary" size="mini">新增关联</el-button>
    </el-dialog>

    <el-dialog title="展示字段" :visible.sync="dialogVisibleShow" width="600px">
      <el-table
        :data="showTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        class="table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableId" label="tableID" align="center"></el-table-column>
        <el-table-column prop="tableName" label="表单名称" align="center"></el-table-column>
        <el-table-column prop="fieldName" label="field名称" align="center"></el-table-column>
      </el-table>
      <el-button
        @click="submitShow"
        type="primary"
        size="mini"
        :disabled="multipleSelection.length==0"
      >展示字段</el-button>
    </el-dialog>

    <el-dialog title="排序字段" :visible.sync="dialogVisibleSort" width="600px">
      <el-table
        :data="sortTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        class="table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableId" label="tableID" align="center"></el-table-column>
        <el-table-column prop="tableName" label="表单名称" align="center"></el-table-column>
        <el-table-column prop="fieldName" label="field名称" align="center"></el-table-column>
      </el-table>
      <el-button
        @click="submitSort(0)"
        type="primary"
        size="mini"
        :disabled="multipleSelection.length==0"
      >升序</el-button>
      <el-button
        @click="submitSort(1)"
        type="primary"
        size="mini"
        :disabled="multipleSelection.length==0"
      >降序</el-button>
    </el-dialog>
    <el-dialog title="可关联表" :visible.sync="dialogVisibleTable" width="720px">
      <el-table
        :data="tableDataList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        class="table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableId" label="tableID" align="center"></el-table-column>
        <el-table-column prop="tableName" label="表单名称" align="center"></el-table-column>
        <el-table-column prop="fieldName" label="field名称" align="center"></el-table-column>
      </el-table>
      <el-button
        @click="submitSort(0)"
        type="primary"
        size="mini"
        :disabled="multipleSelection.length==0"
      >升序</el-button>
      <el-button
        @click="submitSort(1)"
        type="primary"
        size="mini"
        :disabled="multipleSelection.length==0"
      >降序</el-button>
    </el-dialog>
    <!-- stdappTableDetail -->
  </div>
</template>

<script>
import { api } from "../server/api";
export default {
  data() {
    return {
      tableData: [],
      joinTableData: [],
      showTableData: [],
      sortTableData: [],
      tableDataList:[],
      multipleSelection: [],
      dialogVisible: false,
      dialogVisibleShow: false,
      dialogVisibleSort: false,
      tableId: "",

    };
  },
  created() {
    // this.getList();
    this.getJoinList();
  },
  methods: {
    getList(id) {
      api.stdappTableJoinLst(id).then(res => {
        this.joinTableData = res;
      });
    },
    getShowList(id) {
      api.stdappTableShowLst(id).then(res => {
        this.showTableData = res;
      });
    },
    getSortList(id) {
      api.stdappTableSortLst(id).then(res => {
        this.sortTableData = res;
      });
    },
    getFilterList(id) {
      api.stdappTableFilterLst(id).then(res => {
        this.filterTableData = res;
      });
    },
    getJoinList() {
      api.stdappTbls4Join().then(res => {
        this.tableData = res;
      });
    },
    joinViceTable(row) {
      this.dialogVisible = true;
      const { tableId } = row;
      this.tableId = tableId;
      this.getList(tableId);
    },
    showViceTable(row) {
      this.dialogVisibleShow = true;
      const { tableId } = row;
      this.tableId = tableId;
      this.getShowList(tableId);
    },
    sortViceTable(row) {
      this.dialogVisibleSort = true;
      const { tableId } = row;
      this.tableId = tableId;
      this.getSortList(tableId);
    },
    filterViceTable(row) {
      this.dialogVisibleSort = true;
      const { tableId } = row;
      this.tableId = tableId;
      this.getFilterList(tableId);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    submitJion() {
      const data = {
        tableId: this.tableId,
        pairLst: this.multipleSelection
      };
      api.stdappTableSetJoin(data).then(res => {
        console.log(res);
        this.$message.success("关联成功");
        this.dialogVisible = false;
        this.joinTableData = [];
        this.multipleSelection = [];
      });
    },
    submitShow() {
      let arr = [];
      this.multipleSelection.forEach(item => {
        const { tableId, fieldId, seqNo } = item;
        arr.push({ tableId, fieldId, seqNo });
      });
      const data = {
        tableId: this.tableId,
        pairLst: arr
      };
      api.stdappTableSetShow(data).then(res => {
        this.$message.success("展示成功");
        this.dialogVisibleShow = false;
        this.showTableData = [];
        this.multipleSelection = [];
      });
    },
    submitSort(sortType) {
      let arr = [];
      this.multipleSelection.forEach(item => {
        const { tableId, fieldId, seqNo } = item;
        arr.push({ tableId, fieldId, seqNo, sortType });
      });
      const data = {
        tableId: this.tableId,
        pairLst: arr
      };
      api.stdappTableSetSort(data).then(res => {
        this.$message.success("排序修改成功");
        this.dialogVisibleSort = false;
        this.sortTableData = [];
        this.multipleSelection = [];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  display: block;
  height: 100%;
  width: 100%;
  overflow: auto;
  background: #f5f5f7;
  .d-logo-wrapper {
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
  }
}
.home {
  .header {
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
  }
  .el-button {
    margin-top: 20px;
  }
  .table {
    max-height: 520px;
    overflow-y: auto;
  }
}
</style>